<template>
  <dv-border-box-10 :color="['#50649a', '#50649b']">
    <div class="tab-container">
      <div class="tab-header">
        <div
          v-for="(tab, index) in tabs"
          :key="index"
          class="tab"
          :class="{ active: activeTab === index }"
          @click="handleBothClicks(index)"
        >
          {{ tab.name }}
        </div>
      </div>
      <div class="tab-content">
        <!-- 性别，年龄，学历 -->
        <CoreCourse v-if="activeTab === 0" />
        <BasisCourses v-if="activeTab === 1" />
        <GeneralCourses v-if="activeTab === 2" />
      </div>
    </div>
  </dv-border-box-10>
</template>

<script>
// 专业必修课
import CoreCourse from "./CoreCourse.vue";
// 通识必修课
import BasisCourses from "./BasisCourses.vue";
// 通识选修课
import GeneralCourses from "./GeneralCourses.vue";

import pubsub from "pubsub-js";

export default {
  components: {
    CoreCourse,
    BasisCourses,
    GeneralCourses,
  },
  data() {
    return {
      activeTab: 0,
      tabs: [
        { name: "专业必修课" },
        { name: "通识必修课" },
        { name: "通识选修课" },
      ],
      stuId: "",
    };
  },
  mounted() {
    this.pubId = pubsub.subscribe("selectStuInfo", (msgName, data) => {
      this.stuId = data;
    });
  },
  methods: {
    handleBothClicks(index) {
      this.activeTab = index;
      const stuId = this.stuId;
      setTimeout(function () {
        pubsub.publish("selectStuInfoScope", stuId);
      }, 0);
    },
  },
  beforeDestroy() {
    pubsub.unsubscribe(this.pubId);
  },
};
</script>

<style scoped>
.tab-container {
  width: 100%;
  height: 100%;
  padding: 10px;
  margin-top: 10px;
  box-sizing: border-box;
  /* font-family: Arial, sans-serif; */
  /* border-radius: 10px;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(25px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  border-left: 1px solid rgba(255, 255, 255, 0.35); */
}

.tab-header {
  font-size: 12px;
  display: flex;
  border-bottom: 1px solid #ccc;
  justify-content: right;
  margin-bottom: 0px;
}

.tab {
  color:#fff;
  padding: 10px 20px;
  cursor: pointer;
}

.tab.active {
  color: #00FFFF;
}
.tab-content {
  width: 100%;
  height: 85%;
}
</style>
